import React, { useEffect, useState } from 'react';
import { BrowserRouter as Router, Link, Route, Switch, NavLink } from 'react-router-dom';
import Header from '../components/Header';
import Mycollection from './Mycollection';
import Mydesign from './Mydesign';
import Myattention from './Myattention';
import { Button, Carousel } from 'antd';
import axios from 'axios';
import './Owner.css';
import avatar from '../images/default.png';

const Owner = () => {
    const [uid, setUid] = useState();
    const [ava_img, setAva_img] = useState();
    const [img, setImg] = useState([]);
    const [name, setName] = useState('');
    const [user, setUser] = useState([]);
    const Submit = (e) => {
        e.currentTarget.parentNode.className = "hide_box";
        localStorage.removeItem('data');
        localStorage.setItem('data', name);
    }
    const changeName = (e) => {
        setName(e.currentTarget.value);
    }
    const showImg = (file) => {
        var reader = new FileReader();
        reader.readAsDataURL(file.currentTarget.files[0]);
        reader.onload = (e) => {
            setAva_img(e.currentTarget.result);
        }
    }
    const makeSure = () => {
        document.getElementById("img").src = ava_img;
    }
    const ShowItem = (e) => {
        e.currentTarget.parentNode.lastChild.className = "show_box";
    }
    const HideItem = (e) => {
        e.currentTarget.parentNode.className = "hide_box";
    }
    useEffect(() => {
        axios.get("http://192.168.72.166:8080/api/getShowDatas")
            .then(res => {
                setImg(res.data.data);
            });
        axios.get("http://192.168.72.166:8080/api/getUsers")
            .then(res => {
                res.data.data.forEach(e => {
                    if (e.user_name == localStorage.getItem('data')) {
                        setUid(e.user_id);
                        setUser(e);
                    }
                })
            });
    }, []);
    return (
        <div className='owner_box'>
            <Header />
            <div className='owner_body'>
                <div className='owner_message'>
                    <div className='own_avatar'>
                        <img className='avatar' src={"http://192.168.72.166:8080/" + user.user_head_portrait} />
                    </div>
                    <div className='owner_whole'>
                        <span className='owner_name'>{user.user_name}</span><br />
                        <span className='owner_motto'>个性签名：{user.user_introduction}</span>
                    </div>
                    <Button className='owner_button' type="dashed" danger ghost>xx人气</Button>
                    <Button className='owner_button' type="dashed" danger ghost onClick={ShowItem}>编辑资料</Button>
                    {/* 详细资料 */}
                    <div className='owner_detail'>
                        <div>
                            <span className='owner_detail_title'>设计费用</span><br />
                            <span className='owner_detail_span'>{user.user_design_cost}</span>
                        </div>
                        <div>
                            <span className='owner_detail_title'>擅长风格</span><br />
                            <span className='owner_detail_span'>{user.user_style}</span>
                        </div>
                        <div>
                            <span className='owner_detail_title'>文创经历</span><br />
                            <span className='owner_detail_span'>{user.user_cultural_experience}</span>
                        </div>
                        <div>
                            <span className='owner_detail_title'>个人履历</span><br />
                            <span className='owner_detail_span'>{user.user_curriculum_vitae}</span>
                        </div>
                    </div>
                    {/* 编辑资料 */}
                    <form action={'http://192.168.72.166:8080/api/updateUser' + uid} method='post' encType='multipart/form-data' className='hide_box'>
                        <ul className='change_box'>
                            <li>
                                <div>更换头像:</div>
                                <div className='avatar_bon'>
                                    <input type="file" name='file' id="file" onChange={showImg} multiple />
                                    <input type='button' id='make_sure' onClick={makeSure} value='确定' />
                                </div>
                                <img src={avatar} id="img" alt='avatar' className='select_img' />
                            </li>
                            <li>
                                <div>修改昵称:</div>
                                <input className='input_box' type="text" placeholder="无特殊字符、10字以内" name='user_name' onChange={changeName} />
                            </li>
                            <li>
                                <div>修改密码</div>
                                <input className='input_box' type="text" placeholder="无特殊字符、10字以内" name='user_password' />
                            </li>
                            <li>
                                <div>个性签名:</div>
                                <input className='input_box' type="text" placeholder="30字以内" name='user_introduction' />
                            </li>
                            <li>
                                <div>设计费用:</div>
                                <input className='input_box' type="text" placeholder="30字以内" name='user_design_cost' />
                            </li>
                            <li>
                                <div>擅长风格:</div>
                                <input className='input_box' type="text" placeholder="30字以内" name='user_style' />
                            </li>
                            <li>
                                <div>文创经历:</div>
                                <textarea className='input_box' placeholder="130字以内" name='user_cultural_experience'></textarea>
                            </li>
                            <li>
                                <div>个人履历:</div>
                                <textarea className='input_box' placeholder="130字以内" name='user_curriculum_vitae'></textarea>
                            </li>
                        </ul>
                        <input type='submit' onClick={Submit} className="hide_button" value="提交" />
                        <input type='button' onClick={HideItem} className="hide_button" value='退出编辑' />
                    </form>
                </div>
                <div className='owner_content'>
                    <div className='owner_carousel'>
                        <Carousel autoplay className='owner_carousel_img'>
                            {
                                img.map((item) => {
                                    if (item.show_token == "owner") {
                                        const img_src = "http://192.168.72.166:8080/" + item.show_name;
                                        return <div>
                                            <img className='contentStyle' src={img_src} />
                                        </div>
                                    }
                                })
                            }
                        </Carousel>
                    </div>
                    <div className='owner_mine'>
                        <NavLink to='/owner' exact activeClassName="own_mine_active"><div className='owner_mine_lazy'>我的设计</div></NavLink>
                        <NavLink to='/owner/collection' activeClassName="own_mine_active"><div className='owner_mine_lazy'>我的收藏</div></NavLink>
                        <NavLink to='/owner/attention' activeClassName="own_mine_active"><div className='owner_mine_lazy'>我的关注</div></NavLink>
                        <Switch>
                            <Route exact path='/owner' component={Mydesign}></Route>
                            <Route path='/owner/collection' component={Mycollection}></Route>
                            <Route path='/owner/attention' component={Myattention}></Route>
                        </Switch>
                    </div>
                </div>
            </div>
        </div>
    )
}

export default Owner;